<template>

    <div class="container">

        <div style="width:100%;text-align:left;">
            <h2>论坛</h2>
            
        </div>
        
        <div >


            
            <el-empty description="空空如也~" style="height: 300px;" v-show="messages.length === 0"></el-empty>

            <MessagesList :messages="messages" @likeMessage="handleLikeMessage" @deleteMessage="handleDeleteMessage" />
            <MessageForm @submit="handleSubmitMessage" :course_id="props.course_id" />
        </div>
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
// import Header from './Header.vue';
import MessagesList from './MessagesList.vue';
import MessageForm from './MessageForm.vue';
import { getCourseForumMessageApi, sendLikeMessageApi } from '@/api/course';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useStore } from 'vuex';
import { deleteCourseForumMessageApi } from '@/api/course';

const props = defineProps({
    course_id: {
        type: Number,
        required: true,
    },
});

const store = useStore();
const messages = ref([]);

async function fetchMessages() {
    // 使用axios或其他方式获取聊天记录
    getCourseForumMessageApi({
        user_id: store.state.user.user_id,
        course_id: props.course_id,
    }).then((response: any) => {
        if (response.code === 200)
            messages.value = response.data;
        else {
            ElMessage.error({
                message: '获取课程评论失败',
                type: 'error'
            });
        }
    })
    // const response = await axios.get('/api/chat-messages');
    // messages.value = response.data;
}

fetchMessages();

function handleLikeMessage(message_id: any) {
    // 发送点赞请求到服务器
    const index = messages.value.findIndex(message => message.id === message_id);

    sendLikeMessageApi({
        message_id: message_id,
        course_id: props.course_id,
        user_id: store.state.user.user_id,
        is_teacher: store.state.user.is_teacher,
        target_likedByCurrentUser: !messages.value[index].likedByCurrentUser,
    }).then(response => {
        if (response.code === 200) {
            ElMessage.success({
                message: '操作成功',
                type: 'success'
            });
            // 更新点赞数
            const index = messages.value.findIndex(message => message.id === message_id);
            if (messages.value[index].likedByCurrentUser)
                messages.value[index].likesCount--;
            else
                messages.value[index].likesCount++;
            messages.value[index].likedByCurrentUser = !messages.value[index].likedByCurrentUser;
        } else {
            ElMessage.error({
                message: '点赞失败',
                type: 'error'
            });
        }
    })
}
function handleDeleteMessage(message_id: any) {
    ElMessageBox.confirm('确认删除该评论？').then(() => {
        deleteCourseForumMessageApi({
            message_id: message_id,
            course_id: props.course_id,
        }).then((response:any) => {
            if (response.code === 200){
                ElMessage.success('删除成功')
                const index = messages.value.findIndex(message => message.id === message_id);
                messages.value.splice(index, 1);

            }else{
                ElMessage.error('删除失败')
            }
        })
    })

}
function handleSubmitMessage(text) {
    // 提交新的聊天消息到服务器
    // axios.post('/api/messages', { text });
}
</script>


<style lang="scss" scoped>
.class-details {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.box-card {
    margin-top: 10px;

    .card-header {
        text-align: left;
    }

    .box {


        .item {
            display: flex;
            align-items: center;

            * {
                margin-right: 20px;
            }
        }
    }
}

.creator-info,
.members,
.course-info {
    margin-top: 20px;
}
</style>